<template>
  <el-row>
    <el-col
      v-if="acls.hasMenuAcl('get_department_list')"
      :span="5"
      style="padding: 10px; min-width: 240px"
      ><dept-tree @check="check($event)"
    /></el-col>
    <el-col :span="acls.hasMenuAcl('get_department_list') ? 19 : 24">
      <lc-crud
        ref="curd"
        :default-sort="{
          prop: 'createTime',
          order: 'ascending'
        }"
        :column="column"
        :record="record"
        :search="search"
        :no-cache="true"
        :expand-params="params"
        :option="option"
        :data="url"
    /></el-col>
  </el-row>
</template>
<script setup lang="ts" name="sys-user">
import { TCrudComponent, TRecord } from "@/components/crud/interface";
import { ITableColumn, STExposeComponent } from "@/components/st/interface";
import LcCrud from "@/components/crud/crud.vue";
import DeptTree from "./dept-tree/index.vue";
import { ref } from "vue";
import { NzSafeAny } from "@/components/sf/type";
import { CascaderUI, RadioUI } from "@/components/sf/interface";
import { Http } from "@/core/api/http.service";
import { useAclHooks } from "@/core/pinia/store/acl.store";
import { Helper } from "@/core/helper/helper.service";
defineOptions({
  name: "user"
});
const curd = ref<TCrudComponent>(null);
const acls = useAclHooks();
const url = ref(`/lc-system/user`);
const params = ref({});
const check = (dept: NzSafeAny) => {
  params.value = dept.id === "all" ? {} : { department: [dept] };
  url.value =
    dept.id === "all"
      ? "/lc-system/user"
      : `/lc-system/user?departmentId=${dept.id}`;

  curd.value.st.setData(url.value);
};
const search = {
  properties: {
    name: {
      title: "用户名",
      ui: {
        placeholder: "请输入用户名"
      }
    }
  }
};
const option = {
  title: "用户"
};
const record = {
  schema: {
    properties: {
      account: {
        type: "string",
        title: "账号",
        format: "noChinese",
        readonly: (data: any) => {
          return !!data?.id;
        },
        ui: {
          placeholder: "请输入账号"
        }
      },
      name: {
        type: "string",
        title: "用户名",
        format: "chinese",
        isTuoMin: true,
        ui: {
          placeholder: "请输入用户名"
        }
      },
      phone: {
        type: "string",
        title: "手机号",
        format: "mobile",
        isTuoMin: true,
        ui: {
          placeholder: "请输入手机号"
        }
      },
      status: {
        type: "number",
        title: "状态",
        ui: {
          widget: "radio",
          border: true,
          items: [
            { label: "正常", value: 0 },
            { label: "冻结", value: 1 },
            { label: "异常", value: 2 }
          ]
        },
        default: 0
      },
      forbidden: {
        type: "boolean",
        title: "禁用",
        ui: {
          widget: "radio",
          border: true,
          items: [
            { label: "否", value: false },
            { label: "是", value: true }
          ]
        } as RadioUI,
        default: false
      },
      roles: {
        type: "string",
        title: "角色",
        ui: {
          placeholder: "角色选择",
          clearable: true,
          multiple: true,
          widget: "select",
          acl: { points: [acls.getMenuAcl("get_role_list")] },
          preFormat: (data: { id: string }[]) => {
            return (data || []).map(r => r.id);
          },
          nxtFormat: (data: string[]) =>
            Array.isArray(data) ? data.map(r => ({ id: r })) : [],

          items: () => Http.of().get("/lc-system/role/select/list")
        },
        default: null
      },

      department: {
        type: "string",
        title: "部门",
        ui: {
          placeholder: "部门选择",
          widget: "cascader",
          value: "id",
          label: "title",
          propDisabled: "forbidden",
          leaf: "isLeaf",
          showAllLevels: false,
          checkStrictly: true,
          multiple: true,
          acl: { points: [acls.getMenuAcl("get_department_list")] },
          items: () => Http.of().get("/lc-system/department/tree/list"),
          preFormat: (data: { id: string }[]) => {
            return (data || []).map(r => r.id);
          },
          nxtFormat: (data: string[]) =>
            Array.isArray(data) ? data.map(r => ({ id: r })) : []
        } as CascaderUI,
        default: null
      }
    },
    required: ["account", "name", "phone", "status", "forbidden"]
  }
} as TRecord;
const column = [
  {
    type: "selection",
    prop: "id"
  },
  {
    type: "index"
  },
  {
    prop: "name",
    label: "用户名"
  },
  {
    prop: "account",
    hidden: true,
    label: "账号"
  },
  {
    label: "是否在线",
    prop: "online",
    type: "tags",
    tags: {
      true: { text: "在线", type: "success" },
      false: { text: "离线", type: "" }
    }
  },
  {
    prop: "status",
    label: "状态",
    type: "tags",
    tags: {
      0: { text: "正常", type: "success" },
      1: { text: "冻结", type: "danger" },
      2: { text: "异常", type: "warning" }
    }
  },
  {
    label: "是否禁用",
    prop: "forbidden",
    type: "tags",
    tags: {
      true: { text: "禁用", type: "danger" },
      false: { text: "启用", type: "" }
    }
  },
  {
    label: "角色",
    prop: "roles",
    type: "tag",
    formatter: (roles: { name: string }[]) => {
      return Array.isArray(roles) && roles.length ? roles.map(r => r.name) : "";
    }
  },
  {
    label: "部门",
    prop: "department",
    type: "tag",
    formatter: (department: { title: string }[]) => {
      return Array.isArray(department) && department.length
        ? department.map(r => r.title)
        : "";
    }
  },
  {
    prop: "createTime",
    type: "date",
    sortable: true,
    dateFormat: "YYYY/MM/DD hh",
    label: "创建时间"
  },
  {
    label: "操作",
    acl: {
      points: acls.getAclArray("patch", "delete", "reset_password"),
      mode: "oneOf"
    },
    width: 220,
    buttons: [
      {
        text: "编辑",
        icon: "ant-design:edit-filled",
        acl: { points: [acls.getMenuAcl("patch")] },
        click: (data: NzSafeAny, st: STExposeComponent) =>
          curd.value?.update({ ...data }).subscribe(() => st.reset())
      },
      {
        text: "删除",
        type: "del",
        icon: "ant-design:delete-filled",
        divider: "dashed",
        color: "red",
        acl: { points: [acls.getMenuAcl("delete")] },
        click: (data: NzSafeAny, st: STExposeComponent) =>
          curd.value?.delOne(data).subscribe(() => st.reset())
      },
      {
        text: "更多",
        divider: "dashed",
        color: "#174ae4",
        acl: { points: [acls.getMenuAcl("delete")] },
        children: [
          {
            text: "重置密码",
            icon: "ic:baseline-lock-reset",
            acl: { points: [acls.getMenuAcl("reset_password")] },
            pop: true,
            tooltip: "确定重置当前用户密码？",
            click: (_: NzSafeAny) => {
              Http.of()
                .post("/login/reset/password")
                .then(() => {
                  Helper.showMessage("重置成功");
                });
            }
          },
          {
            text: "强制下线",
            icon: "ant-design:logout-outlined",
            acl: { points: [acls.getMenuAcl("need_logout")] },
            pop: true,
            tooltip: "确定强制下线当前用户吗？",
            click: (_: NzSafeAny) => {
              Http.of()
                .get("/lc-oauth/oauth2/out-logout", {
                  id: _.id
                })
                .then(() => {
                  Helper.showMessage("强制下线成功");
                });
            }
          }
        ]
      }
    ]
  }
] as ITableColumn[];
</script>
@/components/st/interfaces @/components/crud/interfaces
@/components/sf/interfaces @/components/sf/types
